<template>
  <div class="detail">
    <detail-banner :bannerImgs="bannerImgs" :title="title"></detail-banner>
    <detail-header :title="title"></detail-header>
    <detail-introduction :introInfo="introInfo"></detail-introduction>
    <detail-list :recommend="recommend"></detail-list>
    <detail-reservations :title="reservations.title" :list="reservations.list"></detail-reservations>
    <detail-comment :commentList="commentList"></detail-comment>
  </div>
</template>

<script>
import DetailBanner from "./components/Banner";
import DetailHeader from "./components/Header";
import DetailList from "./components/List";
import DetailReservations from "./components/reservations";
import DetailIntroduction from "./components/Introduction";
import DetailComment from "./components/Comment";
import axios from "axios";
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
    DetailReservations,
    DetailIntroduction,
    DetailComment
  },
  data() {
    return {
      // showBannerBack: true,
      title: "",
      bannerImgs: [],
      introInfo: {},
      recommend: {},
      reservations: {},
      commentList: [],
      lastId: null
    };
  },
  methods: {
    getDetailInfo() {
      axios
        .get("/api/detail.json?id=" + this.$route.query.id)
        .then(this.getDetailInfoSucc);
    },
    getDetailInfoSucc(res) {
      res = res.data;
      if (res.msg && res.data) {
        this.title = res.data.title;
        this.bannerImgs = res.data.bannerImgs;
        this.introInfo = res.data.intro;
        this.recommend = res.data.recommend;
        this.reservations = res.data.reservations;
        this.commentList = res.data.commentList;
      }
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.getDetailInfo();
  }
};
</script>

<style lang="stylus" scoped>
.detail
  background: #f5f5f5
</style>